/*
 * @Author: Yuelei 
 * @Date: 2018-03-18 20:45:17 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-03-18 21:00:18
 */

import React from 'react';
import ReactDOM from 'react-dom';


// 基本jsx语法，样式
let styleCss={
color:'r'+'ed'
}
// 定义组件
let jsx=<div className="jsx" style={styleCss}>jsx...</div>;
// ReactDom两个参数 （组件，选择器（将组件渲染到选择器）)
ReactDOM.render(jsx,
  document.getElementById('app')
);
// 数据逻辑处理
let name='Yuelei';
let names=['Yuelei','NIzhiChao','Wangkai']
let flag=false;
let jsx=(
<div>
     {/*变量使用*/}  
     <p>I am {name}</p>
       {/*条件判断*/}  
  {
    flag? <p>I am {name}</p>: <p>I am not {name}</p>
  }

  {/*数组循环 将names循环，每一个定义为name 循环输出*/}
    {/*数组循环 注意map索引会有一个索引号码，用它做key进行识别*/}
  {
    names.map((name,index)=><p key={index}>Hello,I am {name}</p> )
  }
 
</div>);
// ReactDom有两个参数 第一个是组件，第二个是选择器（将组件渲染到选择器）
ReactDOM.render(jsx,
  document.getElementById('app')
);